<template>
  <div class="home">
    <div class="main">
      <div class="sidebar">
        <button @click="logout">注销</button> <br />
        <button @click="getBook">获取书籍</button>

        <!-- <router-link to="/server">服务</router-link> <br />
        <router-link to="/product">产品</router-link> <br />
        <router-link to="/book">书籍管理</router-link> -->

        <p>
          {{ $store.state.user.username }}
          {{ $store.getters.vip }}
          <img
            class="ava"
            :src="$store.state.user.ava"
            alt=""
          />
        </p>

        <ul>
          <template v-for="(route, index) in routes">
            <li
              @click="go(route.name)"
              :key="index"
              v-if="!(route.meta && route.meta.isHidden)"
            >
              {{ route.name }}
            </li>
          </template>
        </ul>
      </div>
      <div class="content">
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import Router from "@/router/";
import HelloWorld from "@/components/HelloWorld.vue";

export default {
  name: "Home",
  components: {
    HelloWorld,
  },
  data() {
    return {
      routes: [],
    };
  },
  created() {
    console.log(this.$store.state.token);
    console.log("初始化的时候 将routes 赋值给data里面的routes");
    this.routes = Router.options.routes;
  },
  methods: {
    getBook() {
      this.axios.get("/api/book").then((data) => {
        console.log("响应拦截器之后，我才能运行");
        console.log(data);
      });

      // 协议  域名  端口 三个有一个不一致 就跨域
      // https://www.baidu.com  -> 解析成唯一的 ip地址
      // http://   localhost:  8080
    },
    go(name) {
      this.$router.push({
        name,
      });
    },
    logout() {
      this.$router.push({
        name: "Login",
      });
    },
  },
};
</script>

<style lang="scss" scoped>
$miancolor: rgb(0, 162, 255);
.main {
  min-height: 100vh;
  display: flex;
  .sidebar {
    width: 200px;
    height: 100vh;
    background-color: cadetblue;
    font-size: 2em;
  }
  .content {
    background-color: $miancolor;
    flex: 1;
  }
  .ava {
    width: 64px;
    height: 64px;
  }
}
</style>
